<!--
登录
-->
<template>
  <div class="wrap">
    <div class="login">
      <div class="title">欢迎进入应急管理系统</div>

      <div class="login-form">
        <div class="form-item">
          <div class="label">账户名</div>
          <div class="input_bj">
            <input type="text" v-model="form.username" autocomplete="off" placeholder="请输入账户名" class="inputBox" />
          </div>
        </div>
        <div class="form-item">
          <div class="label">密码</div>
          <div class="input_bj">
            <span class="iconImage" v-if="showPsd"> <img src="@/assets/images/yanjing_1.png" @click="showPsd = !showPsd"/></span>
            <span class="iconImage" v-else> <img src="@/assets/images/yanjing.png" @click="showPsd = !showPsd"/></span>
            <input type="password" v-model="form.password" autocomplete="new-password" placeholder="请输入密码" class="inputBox" v-if="showPsd" />
            <input type="text" v-model="form.password" autocomplete="new-password" placeholder="请输入密码" class="inputBox" v-else />
          </div>
        </div>
        <div class="form-item rememberPsw"><label class="ck-pwd-label"><input class="ck-pwd" type="checkbox" v-model="form.ckpwd" /> 记住密码</label></div>
        <div :class="['form-item', 'loginBtn', hasLoading ? 'loginbg2' : 'loginbg1']" @click="loginClick">
          <!-- <span class="loginText" v-if="!hasLoading">登陆</span> -->
          <!-- <img v-else src="@/assets/images/loading.png" alt="加载动画" class="loadingStatus" /> -->
          <!-- <button>登陆</button> -->
          <!-- <img src="@/assets/images/login-btn-bg.png" width="350px" height="61px;" /> -->
        </div>
        <div class="form-item">
          <div class="form-error" v-if="errorMsg">×{{ errorMsg }}×</div>
        </div>
        <!-- <div class="form-item" v-show="hasLoading">
        <img src="../../assets/images/login_loading.png" width="350px" height="61px;" />
      </div> -->
      </div>
    </div>
  </div>
</template>

<script>
import { postLogin } from '@/api/index'
import md5 from 'js-md5'

export default {
  data () {
    return {
      form: {
        username: '',
        password: '',
        ckpwd: false
      },
      errorMsg: '',
      hasLoading: false,
      showPsd: true
    }
  },
  created () {
    const userPwdStr = localStorage.getItem('user.pwd')
    if (userPwdStr) {
      this.form = JSON.parse(userPwdStr)
    }
  },
  methods: {
    loginClick () {
      this.hasLoading = true
      if (!this.form.username) {
        this.errorMsg = '账户名不能为空'
        this.hasLoading = false
        return
      }
      if (!this.form.password) {
        this.errorMsg = '密码不能为空'
        this.hasLoading = false
        return
      }
      postLogin({
        username: this.form.username,
        password: md5(this.form.password)
      }).then(res => {
        if (res.code === 200) {
          const userInfo = res.result || {}
          const token = userInfo.token || ''
          localStorage.setItem('token', token)
          localStorage.setItem('userInfo', JSON.stringify(userInfo))
          // this.$store.commit('setUserInfo', userInfo)

          // 记住密码
          if (this.form.ckpwd) {
            localStorage.setItem('user.pwd', JSON.stringify(this.form))
          } else {
            // localStorage.clear('user.pwd')
          }
          // 跳转主页
          this.$router.push('/')
        } else {
          this.errorMsg = res.message
          // this.$message.error(this.errorMsg)
          this.hasLoading = false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
// @import '@/assets/font.css';
.wrap {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  // background: red;
  background-color: transparent;
  background: url('../../assets/images/login_bg.png') no-repeat;
  // background-repeat:no-repeat;
  // background-position: -86px 4000px;
}
.login {
  // border: 1px solid red;
  width: 100%;
  height: 100%;
  display: flex;
  // justify-content: center;
  align-items: center;
  flex-direction: column;
  padding-top: 5%;
  // padding-bottom: 15%;
  // background: url('../../assets/images/login_bg.png');
  // background: #377080;
  padding-left: 25%;
  padding-right: 25%;

  .title {

font-size: 72px;
font-family: PingFang SC;
font-weight: 600;
color: #FFFFFF;
// text-shadow: 0px 8px 10px #0F1012;


background-image: linear-gradient(180deg, #FDF0EB 0%, #5D727C 100%);
// background-image: linear-gradient( #FDF0EB, #5D727C);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
  }

  .login-form {
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 7%;
    .form-item {
      margin: 2% 2%;
      min-width: 350px;
      // text-align: center;
      .label {
        font-size: 24px;
        font-family: PingFang SC;
        font-weight: 600;
        color: #ffffff;
        text-shadow: 0px 0px 4px #001B23;
      }

      .ck-pwd {
        width: 16px;
        height: 16px;
        background: rgba(229, 221, 198, 0);
        border: 2px solid #5aecfe;
      }

      .ck-pwd-label {
        min-width: 100 px;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #ffffff;
        text-shadow: 0px 0px 4px #001c24;
        padding-left: 2%;
        white-space: nowrap;
      }

      .form-error {
        width: 100%;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #f72e2e;
        text-align: center;
      }
      input[type='checkbox']::after {
        content: '';
        display: block;
        width: 16px;
        height: 16px;
        background: rgba(229, 221, 197, 0);
        border: 2px solid #5aecfe;
        border-radius: 40%;
      }
      input[type='checkbox']:checked::after {
        content: '';
        display: block;
        width: 16px;
        height: 16px;
        border: 2px solid #5aecfe;
        border-radius: 40%;
      }
    }
    .rememberPsw {
      display: flex;
      align-items: center;
    }
    .loginBtn {
      width: 365px;
      height: 65px;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;

      .loginText {
        font-size: 24px;
        font-family: PingFang SC;
        font-weight: 600;
        color: #ffffff;
        text-shadow: 0px 4px 4px #181e20;
      }
      .loadingStatus {
        animation: action 1s linear infinite;
      }
    }
    .loginbg1 {
      background: url('~@/assets/images/login-btn-bg (2).png') no-repeat;
    }
    .loginbg2 {
      background: url('~@/assets/images/login-btn-bg(3).png') no-repeat;
    }

    .input_bj {
      width: 350px;
      height: 61px;
      background-image: url('../../assets/images/login_input.png');
      background-size: cover;
      box-sizing: border-box;
      // padding-top: 5px;
      padding-left: 6%;
      position: relative;
      .inputBox::-webkit-input-placeholder {
        font-size: 18px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #3d969c;
        opacity: 0.5;
        padding-left: 2%;
        // text-align: center;
      }
      .iconImage {
        display: inline-block;
        width: 20px;
        height: 15px;
        position: absolute;
        right: 15px;
        top: 22px;
        cursor: pointer;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .input_bj input {
      width: 100%;
      height: 61px;
      line-height: 61px;
      border: none;
      background: none;
      outline: none;
      color: #59aaca;
      font-size: 1.125rem /* 18/16 */
    }
  }
}

@keyframes action {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>
